<script setup>
import { computed } from 'vue';

// 定义组件的属性
const props = defineProps({
  // 卡片标题
  title: {
    type: String,
    default: ''
  },
  // 卡片类型，用于应用不同样式变体
  type: {
    type: String,
    default: 'default', // default, primary, secondary, danger, success
    validator: (value) => ['default', 'primary', 'secondary', 'danger', 'success'].includes(value)
  },
  // 是否显示卡片阴影
  shadow: {
    type: Boolean,
    default: true
  },
  // 是否禁用悬停效果
  noHover: {
    type: Boolean,
    default: false
  },
  // 是否有圆角
  rounded: {
    type: Boolean,
    default: true
  },
  // 自定义CSS类名
  className: {
    type: String,
    default: ''
  }
});

// 计算卡片的CSS类名
const cardClasses = computed(() => {
  return {
    'common-card': true,
    [`card-${props.type}`]: true,
    'no-shadow': !props.shadow,
    'no-hover': props.noHover,
    'no-rounded': !props.rounded,
    [props.className]: props.className
  };
});
</script>

<template>
  <div :class="cardClasses">
    <!-- 卡片标题区域 -->
    <div v-if="title" class="card-header">
      <h3 class="card-title">{{ title }}</h3>
      <slot name="header-actions"></slot>
    </div>
    
    <!-- 卡片内容区域 -->
    <div class="card-body">
      <slot></slot>
    </div>
    
    <!-- 卡片底部区域 -->
    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style scoped>
.common-card {
  /* 液态玻璃效果基础样式 */
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 24px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 深色主题下的液态玻璃效果 */
[data-theme="dark"] .common-card {
  background: rgba(30, 30, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 圆角样式 */
.common-card:not(.no-rounded) {
  border-radius: 12px;
}

/* 阴影样式 - 液态玻璃风格的阴影 */
.common-card:not(.no-shadow) {
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

/* 深色主题下的阴影 */
[data-theme="dark"] .common-card:not(.no-shadow) {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 悬停效果 */
.common-card:not(.no-hover):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25);
  background: rgba(255, 255, 255, 0.8);
}

/* 深色主题下的悬停效果 */
[data-theme="dark"] .common-card:not(.no-hover):hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  background: rgba(40, 40, 40, 0.8);
}

/* 卡片标题样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* 深色主题下的边框 */
[data-theme="dark"] .card-header {
  border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}

.card-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text-primary, #333333);
}

/* 深色主题下的标题文字 */
[data-theme="dark"] .card-title {
  color: var(--color-text-primary-dark, #ffffff);
}

/* 卡片内容区域 */
.card-body {
  /* 确保内容区域的文字颜色正确 */
  color: var(--color-text-primary, #333333);
}

/* 深色主题下的内容文字 */
[data-theme="dark"] .card-body {
  color: var(--color-text-primary-dark, #ffffff);
}

/* 确保卡片内的链接、段落等元素在深浅主题下都有良好的可读性 */
.card-body p,
.card-body li,
.card-body span,
.card-body div {
  color: inherit;
}

/* 链接样式 */
.card-body a {
  color: var(--color-primary, #42b883);
  text-decoration: none;
  transition: color 0.3s ease;
}

.card-body a:hover {
  color: var(--color-secondary, #63b3ed);
  text-decoration: underline;
}

/* 深色主题下的链接 */
[data-theme="dark"] .card-body a {
  color: var(--color-primary, #42b883);
}

/* 深色主题下的链接悬停 */
[data-theme="dark"] .card-body a:hover {
  color: var(--color-secondary, #63b3ed);
}

/* 卡片底部样式 */
.card-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 深色主题下的边框 */
[data-theme="dark"] .card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* 卡片类型变体 - 液态玻璃风格 */
.card-default {
  /* 默认样式已在.common-card中定义 */
}

.card-primary {
  border-color: rgba(66, 184, 131, 0.3);
  background: rgba(255, 255, 255, 0.75);
}

.card-primary .card-title {
  color: var(--color-primary, #42b883);
}

.card-primary .card-header {
  border-color: rgba(66, 184, 131, 0.2);
}

/* 深色主题下的主卡片 */
[data-theme="dark"] .card-primary {
  border-color: rgba(66, 184, 131, 0.4);
  background: rgba(30, 30, 30, 0.75);
}

.card-secondary {
  border-color: rgba(99, 179, 237, 0.3);
  background: rgba(255, 255, 255, 0.75);
}

.card-secondary .card-title {
  color: var(--color-secondary, #63b3ed);
}

.card-secondary .card-header {
  border-color: rgba(99, 179, 237, 0.2);
}

/* 深色主题下的次要卡片 */
[data-theme="dark"] .card-secondary {
  border-color: rgba(99, 179, 237, 0.4);
  background: rgba(30, 30, 30, 0.75);
}

.card-success {
  border-color: rgba(72, 187, 120, 0.3);
  background: rgba(255, 255, 255, 0.75);
}

.card-success .card-title {
  color: var(--color-success, #48bb78);
}

.card-success .card-header {
  border-color: rgba(72, 187, 120, 0.2);
}

/* 深色主题下的成功卡片 */
[data-theme="dark"] .card-success {
  border-color: rgba(72, 187, 120, 0.4);
  background: rgba(30, 30, 30, 0.75);
}

.card-danger {
  border-color: rgba(245, 101, 101, 0.3);
  background: rgba(255, 255, 255, 0.75);
}

.card-danger .card-title {
  color: var(--color-danger, #f56565);
}

.card-danger .card-header {
  border-color: rgba(245, 101, 101, 0.2);
}

/* 深色主题下的危险卡片 */
[data-theme="dark"] .card-danger {
  border-color: rgba(245, 101, 101, 0.4);
  background: rgba(30, 30, 30, 0.75);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .common-card {
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .card-title {
    font-size: 1.2rem;
  }
  
  .card-footer {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .common-card {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .card-title {
    font-size: 1.1rem;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>